<template>
  <a-config-provider :theme="themeConfig">
  <div class="homepage-container" v-if="withHeader">
    <a-spin v-if="showLoading" tip="读取中" class="globle-spiner"/>
    <a-layout >
      <a-layout-header class="homepage-container__header">
        <a-row>
          <a-col :span="4" offset="2"> 
            <router-link to="/">
              <img class="logo-img" alt="慕课乐高" src="@/assets/logo.png" />
            </router-link>
          </a-col>
          <a-col :span="4" offset="10"> 
            <UserProfile />
          </a-col>
          <a-col :span="2" > 
            <l-theme :themeConfig="themeConfig" @onThemeChange="(e: any)=>onThemeChange(e)"/>
          </a-col>
        </a-row>
        <!-- <div class="homepage-container__header__title">慕课乐高123</div> -->
      </a-layout-header>
      <a-layout-content class="homepage-container__content">
        <div class="homepage-container__content__main">
          <router-view></router-view>
        </div>
      </a-layout-content>
      <a-layout-footer class="homepage-container__footer">
        @ 版本所有 xxx
      </a-layout-footer>
    </a-layout>
  </div>
  <div class="homepage-container" v-else>
    <router-view></router-view>
  </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
// import Home from './views/Home.vue';
import { RouterView, useRoute } from "vue-router";
import UserProfile from "./components/UserProfile.vue";
import LTheme from "@/components/Theme.vue";
import {
  Layout as aLayout,
  LayoutHeader as aLayoutHeader,
  LayoutFooter as aLayoutFooter,
  LayoutContent as aLayoutContent,
  Row as aRow,
  Col as aCol,
  ConfigProvider as aConfigProvider,
  theme,
} from "ant-design-vue";
import { computed, ref, watch } from "vue";
import '@/assets/styles/theme.css';
import { useStore } from "vuex";
import {
  Spin as aSpin,
  message,
} from "ant-design-vue";
import { GlobalDataProps } from "./store";
const route = useRoute();
const store = useStore<GlobalDataProps>();
const withHeader = computed(() => route.meta.withHeader);
const isLoading = computed(()=>{
  // console.log('isLoading', store.getters.isLoading);
  // console.log('isLoading', store.state.global.requestNumber);
 return store.state.global.requestNumber  > 0;
})
const showLoading = computed(()=>{
  console.log('isLoading', store.state.global.requestNumber, route.meta.disableLoading );
  return isLoading.value && !route.meta.disableLoading;
})
// const showLoading = ref(true);
// watch(() => store.state.global.requestNumber, (newVal, oldVal) => {
//   console.log('requestNumber changed:', oldVal, '->', newVal);
//   if (newVal > 0 && !route.meta.disableLoading) {
//     showLoading.value = true; 
//   } else {
//     showLoading.value = false;
//   }
// })
const error = computed(()=>{
  return store.state.global.error;
})
watch(()=> error.value.status,(newVal)=>{
  if(newVal){
    message.error(error.value.message || '未知错误', 2)
  }
})

const themeConfig = ref({
token: {
      colorPrimary :'#1677ff',
  },
  algorithm : theme.defaultAlgorithm
});
function onThemeChange(theme: any) {
  console.log('onThemeChange', theme);
  themeConfig.value = theme;
}
</script>

<style>
.globle-spiner{
  position: fixed;
  top: 10px;
  right: 50%; 
  z-index: 1000;
}

.logo-img{
  height: 64px;
  object-fit: cover;
}


.homepage-container__header {
  /* display: flex;
  justify-content: space-around;
  align-items: center; */
  background-color: var(--theme-bg-color) !important;
  color: var(--ant-color-text) !important;
  border-bottom: 1px solid var(--theme-br-color);
}
.homepage-container__header__title {
  /* color: #fff; */
}

.homepage-container__content__main {
  /* background: #fff; */
  /* padding: 0 24px 24px 30px; */
  /* min-height: calc(100vh - 64px - 69px); */

  /* margin: 0 auto;
  width: 100%; */
}
/* .ant-card-meta-title,.ant-layout-footer{
  color: var(--theme-text-color) !important;
}
.ant-card{
  background-color: var(--theme-header-color) !important;
}
.ant-card-bordered{
  border: 1px solid var(--theme-br-color);
}
.ant-layout-header,.ant-layout-footer{
  background-color: var(--theme-bg-header-color) !important;
  border-bottom: .5px solid var(--theme-br-color);
}
.ant-layout-footer{
  border-top: .5px solid var(--theme-br-color);
} */

</style>
